<template>
  <view class="worktime-container">
    <uni-forms ref="form" :model="formData" :rules="rules">
      <uni-forms-item label="员工姓名" name="employeeName">
        <uni-easyinput v-model="formData.employeeName" placeholder="请输入员工姓名" />
      </uni-forms-item>
      <uni-forms-item label="工作日期" name="workDate">
        <uni-datetime-picker v-model="formData.workDate" type="date" />
      </uni-forms-item>
      <uni-forms-item label="开始时间" name="startTime">
        <uni-datetime-picker v-model="formData.startTime" type="time" />
      </uni-forms-item>
      <uni-forms-item label="结束时间" name="endTime">
        <uni-datetime-picker v-model="formData.endTime" type="time" />
      </uni-forms-item>
      <uni-forms-item label="工作内容" name="workContent">
        <uni-easyinput v-model="formData.workContent" type="textarea" placeholder="请输入工作内容" />
      </uni-forms-item>
      <uni-forms-item label="工作类型" name="workType">
        <uni-data-select v-model="formData.workType" :localdata="workTypes" placeholder="请选择工作类型" />
      </uni-forms-item>
    </uni-forms>
    
    <view class="button-group">
      <button class="submit-btn" @click="submitForm">提交工时</button>
      <button class="reset-btn" @click="resetForm">重置</button>
    </view>

    <!-- 工时记录列表 -->
    <view class="worktime-list">
      <view class="list-title">工时记录</view>
      <uni-list>
        <uni-list-item v-for="(item, index) in worktimeList" :key="index"
          :title="item.employeeName"
          :note="item.workDate + ' ' + item.startTime + '-' + item.endTime"
          :rightText="item.workType"
          showArrow
          @click="viewDetail(item)"
        />
      </uni-list>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        employeeName: '',
        workDate: '',
        startTime: '',
        endTime: '',
        workContent: '',
        workType: ''
      },
      rules: {
        employeeName: {
          rules: [{
            required: true,
            errorMessage: '请输入员工姓名'
          }]
        },
        workDate: {
          rules: [{
            required: true,
            errorMessage: '请选择工作日期'
          }]
        },
        startTime: {
          rules: [{
            required: true,
            errorMessage: '请选择开始时间'
          }]
        },
        endTime: {
          rules: [{
            required: true,
            errorMessage: '请选择结束时间'
          }]
        },
        workType: {
          rules: [{
            required: true,
            errorMessage: '请选择工作类型'
          }]
        }
      },
      workTypes: [{
        value: 'regular',
        text: '常规工作'
      }, {
        value: 'overtime',
        text: '加班'
      }, {
        value: 'training',
        text: '培训'
      }],
      worktimeList: []
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate().then(res => {
        // TODO: 实现工时提交逻辑
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
      }).catch(err => {
        console.error(err)
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    },
    loadWorktimeList() {
      // TODO: 实现工时记录加载逻辑
    },
    viewDetail(item) {
      // TODO: 实现查看详情逻辑
    }
  },
  onLoad() {
    this.loadWorktimeList()
  }
}
</script>

<style lang="scss" scoped>
.worktime-container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.button-group {
  margin-top: 40rpx;
  padding: 0 20rpx;
  
  .submit-btn {
    background-color: #007aff;
    color: #fff;
    margin-bottom: 20rpx;
  }
  
  .reset-btn {
    background-color: #f8f8f8;
    color: #666;
    border: 1px solid #ddd;
  }
}

.worktime-list {
  margin-top: 40rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;

  .list-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;
  }
}
</style>